<!-- Name: Tree Swipe component Author: Goog、2022 -->
<template>
  <ul class="tree-swipe-cell" v-if="data.length>0">
    <li
      v-for="(item, index) in myData"
      :key="index"
      :class="itemClass + ' ' + (!hasActive(item) ? 'no-icon' : '')"
    >
      <van-swipe-cell>
        <van-cell
          :border="false"
          :title="item[option.label]"
          :value="item[option.label2]"
          :icon="hasActive(item)"
          :title-class="labelClass"
          :value-class="label2Class"
          @click="handlerNodeClick({ item, index, data })"
        />
        <template #right>
          <slot :scope="{ item, index, data: data2 }"></slot>
        </template>
      </van-swipe-cell>
      <div
        :class="itemChildrenClass + ' ' + (!hasActive(item) ? 'no-icon' : '')"
      >
        <tree-swipe-cell
          v-if="item.actived"
          :option="option"
          :title-class="labelClass"
          :value-class="label2Class"
          :data="item[option.children] ? item[option.children] : []"
        >
          <template v-slot="{ scope }">
            <slot
              :scope="{
                item: scope.item,
                index: scope.index,
                data: item[option.children],
              }"
            >
            </slot>
          </template>
        </tree-swipe-cell>
      </div>
    </li>
  </ul>
  <div v-else>
    <van-empty :description="empty" :image-size="emptySize" :image="emptyIcon"/>
  </div>
</template>

<script>
import { ref, computed, getCurrentInstance, watch, reactive } from "vue";
export default {
  name: "treeSwipeCell",
  props: {
    emptySize:{
      default:'100px',
      type: String
    },
    emptyIcon:{
      default:'default',
      type: String
    },
    empty:{
      default:'没有数据!',
      type: String
    },
    icon: {
      default: "arrow",
      type: String,
    },
    iconActived: {
      default: "arrow-down",
      type: String,
    },
    nodeClick: {
      default: () => {},
      type: Function,
    },
    data: {
      default: [],
      type: Array,
    },
    option: {
      default: {
        label: "label",
        label2: "label2",
        children: "children",
      },
      type: Object,
    },
    itemClass: {
      default: "tree-swipe-cell-item",
      type: String,
    },
    itemChildrenClass: {
      default: "tree-swipe-cell-item-chidren",
      type: String,
    },
    labelClass: {
      default: "text-overflow",
      type: String,
    },
    label2Class: {
      default: "text-overflow",
      type: String,
    },
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let data2 = reactive([
      {
        label: "树型滑动控件列",
        label2: "树型滑动控件列2",
        children: [
          {
            label: "子树型滑动控件列",
            label2: "子树型滑动控件列2",
            children: [
              {
                label: "子子树型控件列",
                label2: "子子树型控件列2",
              },
            ],
          },
        ],
      },
    ]);

    function initData() {
      /* data2 设置 */
      if (proxy.$props.data?.length > 0) {
        data2 = proxy.$props.data;
      }
      data2 = data2.map((item) => {
        if (item[proxy.$props.option?.children]?.length > 0) {
          item["actived"] = false;
        }
        return item;
      });
    }
    const hasActive = (item) => {
      return item?.actived != undefined
        ? item.actived
          ? proxy.$props.iconActived
          : proxy.$props.icon
        : "";
    };
    function handlerNodeClick(_paprams) {
      if (_paprams.item?.actived != undefined) {
        _paprams.item.actived = !_paprams.item.actived;
      }
      proxy.nodeClick?.(_paprams);
    }
     initData();
    watch(() => proxy.$props.data, initData);
    const myData = computed(() => {
      if (proxy.$props.data?.length > 0) {
        data2 = proxy.$props.data;
      }
      return data2.map((item) => {
        if (item[proxy.$props.option?.children]?.length > 0) {
          item["actived"] = false;
        }
        return item;
      });
    });
    return { data2, hasActive, handlerNodeClick, initData, myData };
  },
};
</script>

<style scoped lang="scss">
$ml: 3px;
.tree-swipe-cell {
  background: #fff;
}
.tree-swipe-cell-item {
  margin-left: $ml;
  &.no-icon {
    margin-left: $ml + 20px;
  }
}

.tree-swipe-cell-item-chidren {
  margin-left: $ml;
  &.no-icon {
    margin-left: $ml + 2px;
  }
}

::v-deep .text-overflow {
  span {
    display: block;
    width: 90%;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
    word-wrap: inherit !important;
  }
}
</style>
